<template>
    <!--    点击事件+ 副作用-->
    <div class="watchEffect">
        {{count}}
        <button @click="add">点击</button>
    </div>
</template>

<script>
    // import {ref} from 'vue';

    import {ref, watchEffect} from 'vue';

    export default {
        name: 'watchEffect',
        setup() {
            // 点击事件
            // const count = ref(0)
            // const add = ()=>count.value++;

            // // setTimeout(() => {
            // //     count.value++
            // //     // -> 打印出 1
            // // }, 100);
            // return {count,add}

            // ----副作用------
            // const count = ref(0)
            // const add = ()=>count.value++;
            // watchEffect(() => console.log(count.value));//初始化时会调此方法，以后每次值改变都调用此方法

            // const add = ()=>{
            //     if(count.value>=5){
            //         stop();
            //     }
            //     count.value++
            // };
            // const stop = watchEffect(() => console.log(count.value));//初始化时会调此方法，以后每次值改变都调用此方法
            // // // -> 打印出 0
            // //
            //
            // return {count,add}
            // -------副作用执行异步操作------

            // const count = ref(0)
            // // const add = ()=>count.value++;
            // // watchEffect(() => console.log(count.value));//初始化时会调此方法，以后每次值改变都调用此方法
            //
            // const add = ()=>{
            //     if(count.value>=5){
            //         stop();
            //     }
            //     count.value++
            // };
            // const stop = watchEffect(async (cancel) => {
            //     await new Promise((resolve)=>{
            //         resolve();
            //         console.log(count.value);
            //     });
            //     cancel(()=>{  //会在异步之前进行触发，清除副作用
            //         console.log('cancel');
            //     })
            // });//初始化时会调此方法，以后每次值改变都调用此方法
            // // // -> 打印出 0
            // //
            //
            // return {count,add}

            // watch
            const count = ref(0);
            const add = () => {
                if (count.value >= 5) {
                    stop();
                }
                count.value++
            };
            watch(count, (count, prevCount) => {
                console.log(count, prevCount);
            });
            return {count, add}


        }
    }
</script>

<style scoped>

</style>
